<script setup>
import { computed } from 'vue'

// Props定义
const props = defineProps({
  // 头像图片地址
  src: {
    type: String,
    default: ''
  },
  // 头像尺寸
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large', 'xlarge', 'custom'].includes(value)
  },
  // 自定义尺寸（当size为custom时使用）
  customSize: {
    type: String,
    default: '40px'
  },
  // 用户名（用于显示首字母或默认头像）
  username: {
    type: String,
    default: ''
  },
  // 是否显示边框
  bordered: {
    type: Boolean,
    default: false
  },
  // 是否可点击
  clickable: {
    type: Boolean,
    default: false
  },
  // 是否圆形
  rounded: {
    type: Boolean,
    default: true
  }
})

// 事件定义
const emit = defineEmits(['click'])

// 计算尺寸样式
const sizeStyles = computed(() => {
  const sizes = {
    small: '32px',
    medium: '48px',
    large: '80px',
    xlarge: '120px'
  }
  
  return {
    width: props.size === 'custom' ? props.customSize : sizes[props.size],
    height: props.size === 'custom' ? props.customSize : sizes[props.size]
  }
})

// 计算类名
const avatarClasses = computed(() => {
  return [
    'base-avatar',
    {
      'base-avatar--bordered': props.bordered,
      'base-avatar--clickable': props.clickable,
      'base-avatar--rounded': props.rounded
    }
  ]
})

// 获取用户名首字母或默认头像
const getInitials = () => {
  if (!props.username) return '👤'
  
  // 提取用户名的前两个字符作为头像显示
  const initials = props.username.slice(0, 2)
  
  // 如果有中文，直接返回前两个字符
  if (/[\u4e00-\u9fa5]/.test(initials)) {
    return initials
  }
  
  // 否则返回大写首字母
  return initials.toUpperCase()
}

// 处理点击事件
const handleClick = () => {
  if (props.clickable) {
    emit('click')
  }
}
</script>

<template>
  <div
    :class="avatarClasses"
    :style="sizeStyles"
    @click="handleClick"
  >
    <img
      v-if="src"
      :src="src"
      :alt="username || '用户头像'"
      class="avatar-image"
      @error="(e) => e.target.style.display = 'none'"
    />
    <div
      v-else
      class="avatar-placeholder"
    >
      {{ getInitials() }}
    </div>
  </div>
</template>

<style scoped>
.base-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  overflow: hidden;
  position: relative;
}

/* 圆形样式 */
.base-avatar--rounded {
  border-radius: 50%;
}

/* 边框样式 */
.base-avatar--bordered {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(76, 110, 245, 0.2);
}

/* 可点击样式 */
.base-avatar--clickable {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.base-avatar--clickable:hover {
  transform: scale(1.05);
}

/* 头像图片 */
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 占位符样式 */
.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
}

/* 不同尺寸的字体大小 */
.base-avatar--small .avatar-placeholder {
  font-size: 12px;
}

.base-avatar--medium .avatar-placeholder {
  font-size: 16px;
}

.base-avatar--large .avatar-placeholder {
  font-size: 24px;
}

.base-avatar--xlarge .avatar-placeholder {
  font-size: 32px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .base-avatar--large {
    width: 60px !important;
    height: 60px !important;
  }
  
  .base-avatar--xlarge {
    width: 100px !important;
    height: 100px !important;
  }
}
</style>